<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app-18">
        <!-- 文本输入框 密码输入框 -->
        <input type="text" v-model="name" /><br />
        <input type="password" v-model="password" />
        <hr />
        <!-- 单选按钮 -->
        <input type="radio" v-model="radioTest" value="A" /> A
        <input type="radio" v-model="radioTest" value="B" /> B
        <input type="radio" v-model="radioTest" value="C" /> C
        <input type="radio" v-model="radioTest" value="D" /> D
        <hr />

        <!-- 复选框，绑定的是一个数组 -->
        <input type="checkbox" v-model="checkBox" value="篮球" /> 篮球 <br />
        <input type="checkbox" v-model="checkBox" value="足球" /> 足球 <br />
        <input type="checkbox" v-model="checkBox" value="羽毛球" /> 羽毛球 <br />
        <input type="checkbox" v-model="checkBox" value="乒乓球" /> 乒乓球 <br />

        <!-- 下拉菜单 select：绑定一个字符串 -->
        <select v-model="city">
            <option value="BJ">北京</option>
            <option value="SH">上海</option>
            <option value="SZ">深圳</option>
            <option value="GZ">广州</option>
        </select>
        <hr />

        <!-- 下拉菜单 select：加上了 multiple ，表示可多选，需要绑定一个数组 -->
        <select v-model="cities" multiple>
            <option value="BJ">北京</option>
            <option value="SH">上海</option>
            <option value="SZ">深圳</option>
            <option value="GZ">广州</option>
        </select>

        <button type="button" @click="test">测试</button>
    </div>

    <script type="text/javascript">

        var vm = new Vue({
            el: '#app-18',
            data: {
                name: "admin",
                password: "123456",
                radioTest: "C",
                checkBox: [],
                city: "",
                cities: []
            },
            methods: {
                test: function () {
                    alert(vm.cities)
                }
            }

        })
    </script>
</body>
</html>